import './App.css';
import { Route, Redirect, Switch } from "react-router-dom";

import React, { Component, lazy } from 'react';
import Login from "./views/Login.jsx";
import NotFound from "./views/NotFound.jsx";
import Index from "./views/Index.jsx";
import Search from "./views/Search.jsx";
import Register from './views/Register.jsx'
import MyDetail from './views/MyDetail.jsx'
import shouc from './views/MyShouc.jsx'
// var Index = lazy(()=>import('./views/Index.jsx'))
// var Login = lazy(()=>import('./views/Login.jsx'))
// var Search = lazy(()=>import('./views/Search.jsx'))
// var Register = lazy(()=>import('./views/Register.jsx'))
// var MyDetail = lazy(()=>import('./views/MyDetail.jsx'))
// var NotFound = lazy(()=>import('./views/NotFound.jsx'))


class App extends Component {
  render() {
    return (
      <div className='App'>
        <Switch>
          <Route exact path='/Login' component={Login}></Route>
          <Route  path='/Index' component={Index}></Route>
          {/* 动态路由 */}
          <Route exact path='/Search' component={Search}></Route>
          <Route exact path='/Register' component={Register}></Route>
          <Route exact path='/shouc' component={shouc}></Route>

          <Route exact path='/detail/:id' component={MyDetail}></Route>
          <Redirect exact from="/" to="/index" />
          <Route  path='*' component={NotFound}></Route>
        </Switch>

      </div>
    );
  }
}

export default App;
